<template>
	<div class="headimgSongSheet">
		<slot>    
			<musicList v-if="!!SongSheet" class="musiclist" :srcImg="SongSheet"></musicList>
		</slot>
	</div>
</template> 

<script>
	import jsonp from "jsonp";
	import musicList from "./musicList";
	export default {
		name:"headimgSongSheet",
		data(){
			return{
				SongSheet:[],
			}
		},
		components:{
			musicList,
		},
        created(){
            var nowTime = new Date().getTime();//获取当前时间,注意返回值为毫秒
            if(sessionStorage.SongSheet){//判断之前是否已经存储了SongSheet信息
                var tem = JSON.parse(sessionStorage.SongSheet);//将存储的信息转化未json对象格式
                if(nowTime - tem.expir<3600000){//判断存储信息的时间和当前时间的距离是否小于1小时
                    this.SongSheet = tem.data;
                    return;//小于1h就直接return，不再执行ajaj请求
                }
            }
            jsonp("http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.billboard.billList&type=25&size=54&offset=0",null,(err,res)=>{
                if(err){
                    console.log(err)
                    if(tem){
                        this.SongSheet = tem.data;//如果请求失败就用之前存储的值
                    }
                }else{
                    sessionStorage.SongSheet = JSON.stringify({//把json对象格式转化为字符串
                        "data":res,
                        "expir":new Date().getTime()
                    });
                    this.SongSheet = res;
                }
            })
        }
	}
</script>

<style scoped lang="scss">
	.headimgSongSheet{
		width: 95%;
		margin: 0 auto;
		.musiclist li{
			width: 32.33%;
			display: inline-block;
			margin-top: 3%;
			margin-right: 1%;
		}
	}
</style>